<template>
  <div>
    <div class="main" id="main"></div>
    <div class="main" id="main2"></div>
    <div class="main" id="main3"></div>
    <div class="main" id="main6"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import {curveEcharts,columnarEcharts,directionEcharts,cakeEcharts} from './utils'
export default {
  data() {
    return {
      xData:["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
      yData: [
        { 
          arr:[10, 52, 20, 34, 90, 33, 20], 
        },
        {
          arr:[11, 22, 20, 33, 39, 33, 22]
        }
      ],
      yColor: [ '#92CDBB', '#EDD977', '#E89F6A'],

      xData2:["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
      yColor2: [ '#92CDBB', '#EDD977', '#E89F6A'], 
      yData2:[10,11,15,31,11,16],

      xData3:["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
      yColor3: [ '#92CDBB', '#EDD977', '#E89F6A'], 
      yData3:[10,11,15,31,11,16],
      Gradient:['#B2E5FF','#5DA5F3'], //左浅色 //右深色

      cColor: ['#ADE1FE','#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'],
      cData:[
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
      ],

    }
    
  },
  mounted() {
    curveEcharts('main',this.xData,this.yData,this.yColor)
    columnarEcharts('main2',this.xData2,this.yData2,this.yColor2)
    directionEcharts('main3',this.xData3,this.yData3,this.Gradient)
    cakeEcharts('main6',this.cData,this.cColor)
  },
  methods: {
    
  },
}
</script>
<style lang="less">
  .main{
    width: 600px;
    height:300px;
  }
</style>